<template>
	<su-popup :show="show" type="bottom" round="40" :isMaskClick="true" backgroundColor="#fff"
		@close="emit('close')">
		<view class="discount ss-p-x-24 ss-p-y-30">
			<view class="discount-title ss-flex justify-between align-center ss-m-b-50">
				<image class="title-image"></image>
				<view>优惠明细</view>
				<image class="title-image" @click="emit('close')" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/group/group-close.png"></image>
			</view>
			<scroll-view scroll-y="true" class="list-scroll" >
				<template v-for="(item,index) in list" :key="index">
					<!-- 判断商家是否有商品选中 没有一个商品是选中状态的话 需要隐藏 -->
					<view class="item ss-m-b-40" v-if="compShow(item)">
						<view class="store-name ss-m-b-20">{{item.store.name}}</view>
						<template v-for="(value,page) in item.goods" :key="page">
							<view class="goods-info ss-p-30 ss-m-b-20" v-if="value.select">
								<view class="goods-item ss-flex justify-between align-center ss-m-b-20">
									<view class="label">{{value.goods_info.title}}</view>
									<view class="content">￥{{value.goods_info.original_price}}</view>
								</view>
								<view class="goods-item ss-flex justify-between align-center ss-m-b-20">
									<view class="label">团购优惠</view>
									<view class="content">{{discount(value)}}</view>
								</view>
								<view class="goods-item ss-flex justify-between align-center ss-m-b-20">
									<view class="label">优惠券</view>
									<view class="content"></view>
								</view>
								<view class="goods-item ss-flex justify-between align-center">
									<view class="label"></view>
									<view class="content">需付款：￥{{value.goods_info.price}}</view>
								</view>
							</view>
						</template>
						<view class="price ss-m-t-20 ss-p-x-30">
							商家合计：<text>￥{{total(index)}}</text>
						</view>
					</view>
				</template>
			</scroll-view>
		</view>
	</su-popup>
</template>

<script setup>
	import {
		computed,
		reactive,
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	
	const emit = defineEmits(['close'])
	
	const props = defineProps({
		show:{
			type:Boolean,
			default: false,
		},
		list:{
			type:Array,
			default: [],
		}
	})
	
	const compShow = (item) => {
		return item.goods.some(item => item.select)
	}
	
	const discount = (item) => {
		if (item.goods_info.is_discount === 0) {
			return '-￥0'
		}
		let money =  Number(item.goods_info.price) * item.goods_num
		return `-￥${sheep.$helper.numFunc(money)}`
	}
	
	const total = (index) => {
		let money = 0 
		props.list[index].goods.forEach(item => {
			if (item.select) {
				money +=  item.goods_num * Number(item.goods_info.price)
			}
		})
		return sheep.$helper.numFunc(money)
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}
	
	.discount {
		width: 100%;
		
		/* #ifdef MP||H5 */
		height: 1090rpx;
		/* #endif */
		
		/* #ifdef APP */
		height: 940rpx;
		/* #endif */
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		
		.discount-title {
			.title-image {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
			
			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #383838;
			}
		}
		.list-scroll {
			height: 800rpx;
		}
		.item {
			.store-name {
				font-weight: 500;
				font-size: 28rpx;
				color: #383838;
			}
			
			.goods-info {
				width: 702rpx;
				background: #F3F3F3;
				border-radius: 10rpx;
				
				.goods-item {
					.label {
						font-weight: 400;
						font-size: 24rpx;
						color: #9F9F9F;
					}
					
					.content {
						font-weight: 400;
						font-size: 24rpx;
						color: #2F2F2F;
					}
				}
			}
			
			.price {
				font-weight: 400;
				font-size: 24rpx;
				color: #383838;
				text-align: right;
				
				text {
					color: #35C7A8;
				}
			}
		}
	}
</style>